<template>
  <div>
    <map
        v-if="latitude"
        id="map"
        class="map"
        :latitude="latitude"
        :longitude="longitude"
        style="width: 100%;height: 50vh"
        :markers="markers"
        :scale="scale"
        :circles="circles"
    >
    </map>
    <living-area @change="itemChange" :latitude="latitude" :longitude="longitude" v-if="latitude"/>
  </div>
</template>

<script>
import livingArea from "./components/livingArea.vue";
import {getDistance} from "../../utils/utils";
import {MapUtil} from "../../utils/map";
import {mapGetters} from "vuex";
export default {
  name: 'wx_pages_llhz_fifteenMinutes',
  components:{livingArea},
  data() {
    return {
      latitude: '',
      longitude: '',
      scale: 14,
      markers:[],
      circles:[]
    }
  },
  computed:{
    ...mapGetters(['userInfo']),
  },
  methods:{
    itemChange({distance,list,queryText,icon}){
      this.markers = list.map(item => ({
        ...item,
        id: item.indexCode,
        iconPath: item.icon,
        width: 18,
        height: 20,
        joinCluster: true,
        latitude: item.placesLatitude,
        longitude: item.placesLongitude,
        distance: item.placesLatitude ? getDistance(item.placesLatitude, item.placesLongitude, this.latitude, this.longitude).m : ''
      })).filter(item => item.distance && item.distance <= distance).concat([
        {
          latitude: this.latitude,
          longitude: this.longitude,
          iconPath: require('@/static/image/shape.png'),
          width: 18,
          height: 20,
          joinCluster: true,
          label: {
            content: queryText, // 要显示的文字内容
            color: '#0E82FF', // 文字颜色，带透明度
            fontSize: 14, // 文字大小
            bgColor: '#FFFF0000' // 背景颜色，带透明度，可以使文字有背景色，增强可读性
          }
        }
      ])
      this.circles = [
        {
          latitude:this.latitude,
          longitude:this.longitude,
          radius:distance,
          color:'#42D8FF00',
          fillColor:'#42D8FF42'
        }
      ]
    }
  },
  onLoad() {
    const _this = this
    const {gisObj} = _this.userInfo
    MapUtil.Geolocation().then(res => {
      _this.latitude = res.lat || gisObj.lat
      _this.longitude = res.lng || gisObj.lng
    })
  }
}
</script>
